<template>
    <div class="font_select_container">
        <div class="font_search_span">
            <el-form :inline="true" :model="fontIconFrom" size="default">
                <el-form-item style="width: 240px">
                    <el-input v-model="fontIconFrom.iconName" placeholder="请输入font icon名称" :clearable="true"/>
                </el-form-item>
                <el-form-item>
                    <el-button icon="Search" type="primary" @click="btSearch">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="font_show_container">
            <scoll-bar
            :is-show-vertical="true"
            :is-show-horizontal="false"
            >
                <div class="font_show_span">
                    <template v-for="item in showFonts" :key="item.id">
                        <div class="show_font_item" v-show="item.isShow">
                            <div class="copy_span">
                                <div>{{item.type}}</div>
                                <div class="copy_bt" @click="copyFont($event)">
                                    <i class="far fa-copy"></i>
                                    <input class="font_icon_input" :value="item.className">
                                </div>
                            </div>
                            <div class="font_icon_span" v-html="item.fontStr"></div>
                            <div class="font_icon_name">{{item.name}}</div>
                        </div>
                    </template>
                </div>
            </scoll-bar>
        </div>
        <div class="page_container">
            <el-pagination
                v-model:page-size="fontIconFrom.pageSize"
                v-model:currentPage="fontIconFrom.page"
                layout="prev, pager, next"
                :total="fontIconFrom.total"
                @current-change="currentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
import '@fortawesome/fontawesome-free/js/all'
import ScollBar from '@/components/scroll-bar.vue';
const pageSize = 16;

export default {
    name: "font-icon-select",
    props: {
        copySuccessCallback: {
            type: Function,
            default: null
        }
    },
    data: function(){
        return {
            fontIconFrom: {
                iconName: "",
                pageSize: pageSize,
                page: 1,
                total: 0
            },
            allFonts: [],
            showAllFonts: [],
            showFonts: [],
            setCopySuccessCallback: this.copySuccessCallback
        }
    },
    methods: {
        copyFont: function(e){
            e.currentTarget.getElementsByTagName("input")[0].select();
            document.execCommand("Copy");
            if(this.setCopySuccessCallback != null){
                this.setCopySuccessCallback();
            }
        },
        currentChange: function(current){
            this.fontIconFrom.page = current;
            this.showFonts = [];
            setShowData(this);
        },
        btSearch: function(){
            if(this.fontIconFrom.iconName){
                this.fontIconFrom.page = 1;
                this.showFonts = [];
                this.showAllFonts = new Array();
                for(let i=0;i<this.allFonts.length;i++){
                    let item = this.allFonts[i];
                    if(item.name.indexOf(this.fontIconFrom.iconName) >= 0){
                        this.showAllFonts.push(item);
                    }
                }
                setShowData(this);
            }else{
                this.fontIconFrom.page = 1;
                this.showFonts = [];
                this.showAllFonts = new Array();
                for(let i=0;i<this.allFonts.length;i++){
                    let item = this.allFonts[i];
                    this.showAllFonts.push(item);
                }
                setShowData(this);
            }
        }
    },
    created: function(){
        this.allFonts = getAllFont();
        this.showAllFonts = this.allFonts;
        this.fontIconFrom.page = 1;
        setShowData(this);
    },
    components : {
        ScollBar
    }
}

/**
 * 设置实际显示的数据
 * @param app vue对象
 */
function setShowData(app){
    let pageArray = setPaging(app.showAllFonts);
    if(pageArray.length == 0){
        app.showFonts = [];
        app.fontIconFrom.total = 0;
        return;
    }
    app.showFonts = pageArray[app.fontIconFrom.page - 1];
    app.fontIconFrom.total = app.showAllFonts.length;
}

/**
 * 获取所有的font icon的class名称
 */
function getAllFont(){
    const allFontKey = new Array();
    const allFont = window["___FONT_AWESOME___"].styles;
    const allKey = ["fas","fab","far"];
    let index = 1;
    for(let i=0; i<allKey.length; i++){
        let fonts = allFont[allKey[i]];
        for(let fontKey in fonts){
            let classStr = allKey[i] + " fa-" + fontKey;
            let fontOject = {
                "id": index,
                "type": allKey[i],
                "name": fontKey,
                "className": classStr,
                "isShow": true,
                "fontStr": "<i class='" + classStr + "'></i>"
            }
            allFontKey.push(fontOject);
            index ++;
        }
    }
    return allFontKey;
}

/**
 * 将需要显示的数据进行分页
 * @param showAllFonts 需要显示的所有font icon
 */
function setPaging(showAllFonts){
    const groupFonts = new Array();
    let tempArray = null;
    for(let i=0; i<showAllFonts.length; i++){
        if(i % pageSize == 0){
            tempArray = new Array();
            groupFonts.push(tempArray);
        }
        tempArray.push(showAllFonts[i]);
    }
    return groupFonts;
}
</script>
<style scoped>
.font_select_container{
    width: 100%;
    height: 100%;
    font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    color: #666666;
}
.font_search_span{
    height: 30px;
    margin-top: -20px;
}
.font_show_container{
    height: calc(100% - 60px);
    margin-top: 8px;
}
.page_container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
}
.font_show_container .font_show_span{
    margin-left: 10px;
    margin-top: 10px;
    width: clac(100%-10px);
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.show_font_item{
    width: 160px;
    height: 80px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #fff;
    
}
.show_font_item:hover{
    box-shadow: 1px 1px 6px rgb(203, 205, 206);
}

.show_font_item .copy_span{
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-between;
}
.copy_span .copy_bt{
    width: 20px;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}
.copy_bt .font_icon_input{
    position: relative;
    left: 0px;
    top: 5px;
}
.font_icon_span{
    margin-top: 1px;
    width: 100%;
    height: 42px;
    font-size: 32px;
    text-align: center;
}
.font_icon_name{
    width: 100%;
    height: 20px;
    text-align: center;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: text;
}
</style>